<template>
    <el-menu class="indexLeft-page" background-color="#545c64" text-color="#747B82" @select="select"
        :default-active="showMenu"
    >
        <template v-for="item in menus" v-if="item.type==1">
            <template v-if="item.subMenus">
                <el-submenu :index="item.id.toString()">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span>{{ item.name }}</span>
                    </template>
                    <el-menu-item v-for="subItem,i in item.subMenus" v-if="subItem.type==1" :key="i"
                    :index="subItem.url+'_'+subItem.name">
                        {{ subItem.name }}
                    </el-menu-item>
                </el-submenu>
            </template>
            <template v-else>
                <el-menu-item :index="item.id.toString()">
                    <i :class="item.icon"></i>
                    <span>{{ item.name }}</span>
                </el-menu-item>
            </template>
        </template>

    </el-menu>
</template>
<script>
    export default({
        props: ["showMenu"],
        data(){
            return{
                menus: []
            }
        },
        methods: {
            select(e){
                let that = this;
                that.$emit("clickMenu",{
                    tabOptions : e
                })
            }
        },
        created(){
          let that = this;
          let menusList = that.localData('get', 'login_user').adminUserResourceVOList;
          menusList.map(function(item){
            let subMenus = [];
            item.list.forEach(function(itemChild,index){
              subMenus.push({
                "id":itemChild.resourceId,
                "name":itemChild.resourceName,
                "type":1,
                "url":itemChild.url,
                "icon":"",
                "sort":1,
                "parentId":null,
                "subMenus":[

                ]
              })
            })
            that.menus.push({
              "id":item.resourceId,
              "name":item.resourceName,
              "type":1,
              "url":item.url,
              "icon":"iconfont icon-yonghuguanli",
              "sort":1,
              "parentId":null,
              "subMenus":subMenus
            })
          })
        }
    })
</script>
<style lang="less">
    .indexLeft-page{
        border-right: 0;
        min-height: 100%;
        .el-submenu {
            overflow: hidden;
          .el-submenu__title {
                .iconfont {
                    position: relative;
                    top: -1px;
                    margin-right: 5px;
                    font-size: 18px;
                }
                .el-submenu__icon-arrow {
                    ms-transform: rotate(-90deg);
                    transform: rotateZ(-90deg);
                    margin-top: -4px;
                }
          }
            .el-menu {
                .el-menu-item {
                    height: 40px;
                    line-height: 40px;
                    &.is-active {
                        background-color: #000 !important;
                        position: relative;
                        &::after {
                            left: 0;
                            top: 0;
                            position: absolute;
                            content: '';
                            width: 2px;
                            height: 100%;
                            background-color: #FF7500;
                        }
                        &::before {
                            right: 0;
                            top: 50%;
                            margin-top: -5px;
                            position: absolute;
                            content: '';
                            width: 0;
                            height: 0;
                            border-top: 5px solid transparent;
                            border-right: 5px solid #f6f6f6;
                            border-bottom: 5px solid transparent;
                        }
                    }
                }
            }
            &.is-opened {
                .el-submenu__icon-arrow {
                  -ms-transform: rotate(0deg);
                  transform: rotateZ(0deg);
                }
            }
            &.is-active {
                .el-submenu__title {
                  color: #fff !important;
                  * {
                    color: #fff
                  }
                }
            }
        }
        .el-menu-item.is-active{
            color:#FF7500;
        }
    }
</style>
